<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.7.1.min.js"></script>
    <script>
        function search(){
            var goodsName = $("#search").val();
            let formData2 = new FormData();
            if(goodsName!==null&&goodsName!==''){
                formData2.append("goodsName", goodsName);
            }
            $.ajax({
                url: "${pageContext.request.contextPath}/selectGoodsBySelective",
                headers: {
                    "Cache-Control": "no-cache",
                    "Pragma": "no-cache"
                },
                type: "post",
                data: formData2,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    const goods = data.data.goodss;
                    console.log(goods)
                    if (data.flag === 1) {
                        let str = ''
                        goods.forEach((uItem, uIndex) => {
                            const timestamp =goods[uIndex].numUpdateDate;
                            const date = new Date(timestamp);
                            let utcString = date.toUTCString();
                            if(timestamp===null){
                                utcString = ''
                            }
                            str += `
                                    <tr >
                                        <td>` + (uIndex+1) + `</td>
                                        <td>` + goods[uIndex].goodsName + `</td>
                                        <td>` + goods[uIndex].purchasePrice + `</td>
                                        <td>` + goods[uIndex].salePrice + `</td>
                                        <td>` + goods[uIndex].stockNum + `</td>
                                        <td>` + utcString+ `</td>
                                        <td>` + goods[uIndex].user.userName + `</td>

                                    </tr>`
                        })
                        $('table tbody').html(str);
                    }
                }
            });
        }
    </script>
    <!-- 自定义CSS样式 -->
    <link rel="stylesheet"
          href="${pageContext.request.contextPath}/assets/css/reset.css">
    <style>
        td, tr, th {
            text-align: center;
            line-height: 54px;
        }
    </style>
</head>

<body>
<div class="row shadow-none p-3 mb-5 bg-light rounded fixed-top">
    <div class="col ">
        <div class="input-group mb-3">
            <input type="text"
                   id="search"
                   class="form-control"
                   placeholder="商品名称"
                   aria-label="Recipient's username"
                   aria-describedby="button-addon2">
            <div class="input-group-append">
                <button class="btn  btn-primary"
                        type="button"
                        id="button-addon2"
                        onclick="search()">查询
                </button>
            </div>
        </div>
    </div>
    <div class="col">
    </div>
</div>


<table class="table table-hover " style="margin-top: 100px;margin-bottom: 100px">
    <thead>
    <tr>
        <th scope="col">序号</th>
        <th scope="col">商品名称</th>
        <th scope="col">进价</th>
        <th scope="col">销售价格</th>
        <th scope="col">库存</th>
        <th scope="col">库存更新时间</th>
        <th scope="col">供应商</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="goods" items="${goods}" varStatus="index">
        <tr>
            <th scope="row">${index.index+1}</th>
            <td>${goods.goodsName}</td>
            <td>${goods.purchasePrice}</td>
            <td>${goods.salePrice}</td>
            <td style="color: ${goods.stockNum<10?"red":""}">${goods.stockNum}</td>
            <td>${goods.numUpdateDate}</td>
            <td>${goods.user.userName}</td>
        </tr>
    </c:forEach>

    </tbody>
</table>

<script>

</script>

<script src="${pageContext.request.contextPath}/bootstrap-5.3.0-alpha1-dist/js/bootstrap.min.js"></script>


</body>


</html>